<script>
import { getList, authority, menuSport } from 'services/x-start/mgr/common'
import Menu from '@/components/common/Menu'
import { mapMutations } from 'vuex'

export default {
  components: { Menu },
  created() {
    this.getMenuSport() //获取菜单运动列表
    this.getSportList() //获取所有运动列表
    this.getAuthority() //菜单权限
  },
  data() {
    return {
      isOpen: false,
    }
  },
  methods: {
    getSportList() {
      getList().then(res => {
        //获取所有运动列表
        this.setSportList(res.data)
      })
    },
    getMenuSport() {
      menuSport().then(res => {
        this.setMenuSport(res.data)
      })
    },
    getAuthority() {
      authority()
        .then(res => {
          this.updateAuthority(res.data)
          this.isOpen = true
        })
        .catch(({ payload }) => {
          this.$message.error(payload.message)
          location.href = process.env.NODE_ENV == 'production' ? '/dist/' : '/'
        })
    },
    ...mapMutations(['setSportList', 'updateAuthority', 'setMenuSport']),
  },
}
</script>

<template lang="pug">
.div(v-if="isOpen")
  Menu
  .content#content
    router-view
</template>

<style lang="stylus" scoped>
.content
  margin-left 200px
  box-sizing border-box
  transition all 0.2s ease
  overflow-x hidden
  overflow-y scroll
  height 100vh
@media screen and (max-width: 650px)
  .content
    margin-left 0
</style>
